<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 50px;
                height: 20px;

                margin: 0 auto;
                text-align: center;
            }

            li {
                list-style: none;
            }

            .yc {
                display: none;
            }

            .xs {
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="box">微博</div>
        <div class="yc">
            <li>私信</li>
            <li>留言</li>
            <li>emo</li>
        </div>
        <script type="text/javascript">
            var box = document.querySelector('.box');
            var yc = document.querySelector('.yc');
            box.onmousemove = function() {
                yc.className = 'xs';
            }
            box.onmouseout = function() {
                yc.className = 'yc';
            }
        </script>
    </body>
</html>
